<template>
  <div id="favour">
    <div v-if="FavourArticles.length!==0">
      <div class="biji" v-for="(ariticle, index) in FavourArticles.slice(pageSize*currentPage-2,pageSize*currentPage)" :key="index" :index="index">
        <h2 @click="gotoariticle(ariticle.aid)" v-html="ariticle.title"></h2>
        <p class="name" style="margin: 8px 0 13px;">作者：{{ariticle.specialist.specialistName}}&nbsp;&nbsp;发布时间：{{ariticle.releaseDateStr}}</p>
        <p style="line-height: 1.5">{{ariticle.description}}</p>
      </div>
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          @current-change="handleCurrentChange"
          :total="FavourArticles.length"
          :page-size="pageSize"
          :current-page="currentPage">
        </el-pagination>
      </div>
    </div>
    <div class="nocontext" v-else>
      暂无收藏，快去首页看看吧！
    </div>
  </div>
</template>

<script>
  export default {
    name: "Favour",
    data() {
      return{
        FavourArticles: [],
        currentPage: 1,
        pageSize: 2
      }
    },
    mounted() {
      this.$http({
        url: '/article/showFavourArticleList',
        method: 'post',
        data: this.$store.state.user.uid
      }).then(res => {
        console.log(res.data);
        this.FavourArticles = res.data
      }).catch(err => {
        console.log(err);
      })
    },
    methods: {
      //去到文章详情
      gotoariticle(aid){
        this.$router.push('/article/'+aid)
      },
      //分页
      handleCurrentChange(val) {
        this.currentPage = val
      }
    }
  }
</script>

<style scoped>
  #favour{
    background-color: #ffffff;
    padding: 10px 20px;
    color: black;
    text-align: left;
    line-height: 1.2;
  }
  .biji p{
    margin: 0;
  }
  .biji h2{
    color: #358685;
    margin: 0;
  }
  .name{
    margin: 8px 0 13px;
    color: #868d95;
  }
  .biji{
    padding: 10px;
    border-bottom: #efeaea solid 1px;
    margin: 10px 0;
  }
  .nocontext {
    text-align: center;
    color: #999;
    font-size: 24px;
    margin-top: 40px;
  }
</style>
